import React, { useEffect, useState } from 'react';
import { Modal, Form, Space, Popconfirm, DatePicker } from 'antd';
import FormCondition from '@/components/FormCondition';
import { connect, history } from 'umi';
import { Button, Row, Col, Input, InputNumber } from 'antd';
import { dateNowYearDisabled, dateNowDisabled } from '@/common/regular';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import moment from 'moment';
const CheckOrderForm = (props) => {
  const { visible = false, onClose, loading, dispatch, handleCallback, } = props;
  const { show = false, detail = {} } = visible;
  const { orderSn, additionalDiscounts, payTime, payFee, certificateImages } = detail;
  console.log(detail)
  const [status, setStatus] = useState(null)
  const [form] = Form.useForm();
  // 确认提交
  const handleUpAudit = () => {

    form.validateFields().then((values) => {
      const { payTime, } = values

      Modal.confirm({
        title: '提示',
        content: '确认提交',
        zIndex: 1008,
        okText: '确认',
        onOk() {
          dispatch({
            type: 'order/fakeCheckOrder',
            payload: {
              ...values,
              payTime: payTime.format('YYYY-MM-DD HH:mm'),
            },
            callback: () => {
              history.goBack()
            }
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      })


    });
  };
  useEffect(() => {
    if (!show) {
      setStatus(null)
    }
  }, [show])
  const SetTextArea = (props) => {
    const { form } = props;
    const list = [
      '收据或付款截图缺失',
      '收据商品与录入商品不一致',
      '收据商品科目与录入商品不一致',
      '学员信息不一致',
      '实收金额不正确',
      '应收金额不正确',
      '实际未到账或查不到支付纪录',
      '开单日期不正确',
      '支付时间与支付截图不一致',
      '订单备注不符合条件'
    ];
    return (
      <Row style={{ textAlign: 'left' }}>
        <Col offset={6} >
          快捷填入关键词:
          {list.map((item, index) => {
            return (
              <Button
                style={{ marginLeft: 8 }}
                type='link'
                key={index}
                onClick={() => {
                  let data = form.getFieldValue('checkRemark') || '';
                  form.setFieldValue('checkRemark', data + item + ',');
                }}
              >
                {item}
              </Button>
            );
          })}

        </Col>
      </Row>
    );
  }
  const FormTable = (props) => {
    const { keyIndex } = props
    return <Row gutter={[24, 24]}>

      <Col offset={3} style={{ fontSize: 18, fontWeight: 'bold' }} span={21}>
        业绩分配:
      </Col>
      <Col offset={3} span={21}>
        <Form.List name={keyIndex}>
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, ...restField }) => (
                <Row gutter={[24, 24]}>
                  <Col span={10}>
                    <Form.Item
                      {...restField}
                      label='支付时间'
                      name={[name, 'payTime']}
                      rules={[
                        {
                          required: true,
                          message: '请选择支付时间',
                        },
                      ]}
                    >
                      <DatePicker
                        showTime='HH:mm'
                        format='YYYY-MM-DD HH:mm'
                        disabledDate={dateNowDisabled}
                        style={{ width: '100%' }} />
                    </Form.Item>
                  </Col>
                  <Col span={10}>
                    <Form.Item
                      {...restField}
                      label='业绩'
                      name={[name, 'performance']}
                      rules={[
                        {
                          required: true,
                          message: '请输入业绩',
                        },
                      ]}
                    >
                      <InputNumber style={{ width: '100%' }} placeholder="请输入业绩" />
                    </Form.Item>
                  </Col>

                  <Col span={2}>
                    {key !== 0 && <MinusCircleOutlined onClick={() => remove(name)} />}
                  </Col>
                </Row>
              ))}
              <Form.Item>
                <Button style={{ width: 180 }} type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                  添加业绩
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Col>

    </Row>
  }
  const formItems = [
    {
      label: `订单编号`,
      name: 'orderSn',
      disabled: true
    },
    {
      label: `审核状态`,
      name: 'status',
      type: 'select',
      style: { textAlign: 'left' },
      onChange: (e) => {
        setStatus(e)
        form.setFieldValue('remark', '');
      },
      select: {
        1: '通过',
        2: '拒绝'
      }
    },
    {
      label: `超额优惠`,
      name: 'additionalDiscounts',
      type: 'number',
      rules: [{ required: false }],
    },
    {
      label: '支付时间',
      name: 'payTime',
      showTime: 'HH:mm',
      type: 'dataPicker',
      format: 'YYYY-MM-DD HH:mm',
      disabledDate: dateNowDisabled,
    },
    {
      label: `凭证`,
      name: 'certificateImages',
      type: 'upload',
      rules: [{ required: false }],
      disabled: true
    },
    {
      label: `付款金额`,
      name: 'payFee',
      rules: [{ required: false }],
      disabled: true
    },
    {
      label: `备注`,
      name: 'checkRemark',
      type: 'textArea',
      rules: [{ required: false }],
    },
    {
      type: 'noForm',
      rules: [{ required: false }],
      visible: status === '2',
      formItem: <SetTextArea form={form}></SetTextArea>,
    },
  ];
  const formItemLayout = {
    labelCol: {
      sm: { span: 6 },
    },
    wrapperCol: {

    },
  };

  const modalProps = {
    title: '确认审核',
    width: 900,
    visible: show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
    bodyStyle: {
      maxHeight: 600,
      overflowY: 'scroll'
    }
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <FormCondition formItemLayouts={formItemLayout} form={form} initialValues={{
        orderSn,
        additionalDiscounts,
        performanceInfoList: [{
          payTime: moment(payTime, 'YYYY-MM-DD HH:mm'),
          performance: payFee
        }],
        payTime: moment(payTime, 'YYYY-MM-DD HH:mm'),
        payFee, certificateImages
      }} formItems={formItems}></FormCondition>

    </Modal >
  );
};

export default connect(({ order, loading }) => ({
  loading: loading.effects['order/fakeCheckOrder'],
}))(CheckOrderForm);
;
